<!--添加题目-->
<template>
  <div class="add">
    <el-tabs v-model="activeName">
    <el-tab-pane name="first">
      <span slot="label"><i class="el-icon-circle-plus"></i>添加试题</span>
      <section class="append">

        <!--  表头选择框  -->
        <ul>
          <li>
            <span>题目类型:</span>
            <el-select v-model="optionValue" placeholder="请单选题型" class="w150">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </li>


          <li v-if="optionValue == '单选题'">
            <span>所属章节：</span>
            <el-input
              placeholder="请输入对应章节"
              v-model="singleQuestionForm.section"
              class="w150"
              clearable>
            </el-input>
          </li>
          <li v-if="optionValue == '多选题'">
            <span>所属章节：</span>
            <el-input
              placeholder="请输入对应章节"
              v-model="multiQuestionForm.section"
              class="w150"
              clearable>
            </el-input>
          </li>
          <li v-if="optionValue == '填空题'">
            <span>所属章节：</span>
            <el-input
              placeholder="请输入对应章节"
              v-model="fillQuestionForm.section"
              class="w150"
              clearable>
            </el-input>
          </li>
          <li v-if="optionValue == '判断题'">
            <span>所属章节：</span>
            <el-input
              placeholder="请输入对应章节"
              v-model="judgeQuestionForm.section"
              class="w150"
              clearable>
            </el-input>
          </li>


          <li v-if="optionValue == '单选题'">
            <span>难度等级:</span>
            <el-select v-model="singleQuestionForm.level" placeholder="选择难度等级" class="w150">
              <el-option
                v-for="item in levels"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </li>
          <li v-if="optionValue == '多选题'">
            <span>难度等级:</span>
            <el-select v-model="multiQuestionForm.level" placeholder="选择难度等级" class="w150">
              <el-option
                v-for="item in levels"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </li>
          <li v-if="optionValue == '填空题'">
            <span>难度等级:</span>
            <el-select v-model="fillQuestionForm.level" placeholder="选择难度等级" class="w150">
              <el-option
                v-for="item in levels"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </li>
          <li v-if="optionValue == '判断题'">
            <span>难度等级:</span>
            <el-select v-model="judgeQuestionForm.level" placeholder="选择难度等级" class="w150">
              <el-option
                v-for="item in levels"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </li>
          <li v-if="optionValue == '单选题'">
            <span>正确选项:</span>
            <el-select v-model="singleQuestionForm.rightAnswer" placeholder="选择正确答案" class="w150">
              <el-option
                v-for="item in rights"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </li>

        </ul>


        <!-- 单选题部分 -->
        <div class="change" v-if="optionValue == '单选题'">
          <div class="title">
            <el-tag>题目</el-tag><span>请在输入框中填写题目内容：</span>
            <el-input
              type="textarea"
              rows="4"
              v-model="singleQuestionForm.question"
              placeholder="请输入题目内容"
              resize="none"
              class="answer">
            </el-input>
          </div>
          <div class="options">
            <ul>
              <li>
                <el-tag type="success">A</el-tag>
                <el-input
                  placeholder="请输入选项A的内容"
                  v-model="singleQuestionForm.answerA"
                  clearable="">
                </el-input>
              </li>
              <li>
                <el-tag type="success">B</el-tag>
                <el-input
                  placeholder="请输入选项B的内容"
                  v-model="singleQuestionForm.answerB"
                  clearable="">
                </el-input>
              </li>
              <li>
                <el-tag type="success">C</el-tag>
                <el-input
                  placeholder="请输入选项C的内容"
                  v-model="singleQuestionForm.answerC"
                  clearable="">
                </el-input>
              </li>
              <li>
                <el-tag type="success">D</el-tag>
                <el-input
                  placeholder="请输入选项D的内容"
                  v-model="singleQuestionForm.answerD"
                  clearable="">
                </el-input>
              </li>
            </ul>
          </div>

          <div class="title">
            <el-tag>解析</el-tag><span>请在输入框中输入题目解析：</span>
            <el-input
              type="textarea"
              rows="4"
              v-model="singleQuestionForm.analysis"
              placeholder="请输入答案解析"
              resize="none"
              class="answer">
            </el-input>
          </div>
          <div class="submit">
            <el-button type="primary" @click="addSingleQuestion()">立即添加</el-button>
          </div>
        </div>


        <!-- 多选题部分 -->
        <div class="multi" v-if="optionValue == '多选题'">
          <div class="title">
            <el-tag>题目</el-tag><span>请在输入框中填写题目内容：</span>
            <el-input
              type="textarea"
              rows="4"
              v-model="multiQuestionForm.question"
              placeholder="请输入题目内容"
              resize="none"
              class="answer">
            </el-input>
          </div>
          <div class="options">
            <ul>
              <li>
                <el-tag type="success">A</el-tag>
                <el-input
                  placeholder="请输入选项A的内容"
                  v-model="multiQuestionForm.answerA"
                  clearable="">
                </el-input>
              </li>
              <li>
                <el-tag type="success">B</el-tag>
                <el-input
                  placeholder="请输入选项B的内容"
                  v-model="multiQuestionForm.answerB"
                  clearable="">
                </el-input>
              </li>
              <li>
                <el-tag type="success">C</el-tag>
                <el-input
                  placeholder="请输入选项C的内容"
                  v-model="multiQuestionForm.answerC"
                  clearable="">
                </el-input>
              </li>
              <li>
                <el-tag type="success">D</el-tag>
                <el-input
                  placeholder="请输入选项D的内容"
                  v-model="multiQuestionForm.answerD"
                  clearable="">
                </el-input>
              </li>
            </ul>
          </div>

          <div class="answer">
            <el-tag>正确答案</el-tag>
            <el-input v-model="multiQuestionForm.answer" placeholder="例如：ABD"></el-input>
          </div>

          <div class="analysis">
            <el-tag>解析</el-tag><span>请在输入框中输入题目解析：</span>
            <el-input
              type="textarea"
              rows="4"
              v-model="multiQuestionForm.analysis"
              placeholder="请输入答案解析"
              resize="none"
              class="answer">
            </el-input>
          </div>

          <div class="submit">
            <el-button type="primary" @click="addMultiQuestion()">立即添加</el-button>
          </div>
        </div>

        <!-- 填空题部分 -->
        <div class="change fill" v-if="optionValue == '填空题'">
          <div class="title">
            <el-tag>题目</el-tag><span>请在输入框中填写题目内容（请注意，需要考生答题的部分请使用英文括号）：</span>
            <el-input
              type="textarea"
              rows="4"
              v-model="fillQuestionForm.question"
              placeholder="请输入题目内容"
              resize="none"
              class="answer">
            </el-input>
          </div>
          <div class="fillAnswer">
            <el-tag>正确答案</el-tag>
            <el-input v-model="fillQuestionForm.answer"></el-input>
          </div>
          <div class="title analysis">
            <el-tag type="success">解析</el-tag><span>下方输入框中输入答案解析：</span>
            <el-input
              type="textarea"
              rows="4"
              v-model="fillQuestionForm.analysis"
              placeholder="请输入答案解析"
              resize="none"
              class="answer">
            </el-input>
          </div>
          <div class="submit">
            <el-button type="primary" @click="addFillQuestion()">立即添加</el-button>
          </div>
        </div>


        <!-- 判断题部分 -->
        <div class="change judge" v-if="optionValue == '判断题'">
          <div class="title">
            <el-tag>题目</el-tag><span>请在输入框中填写题目内容：</span>
            <el-input
              type="textarea"
              rows="4"
              v-model="judgeQuestionForm.question"
              placeholder="请输入题目内容"
              resize="none"
              class="answer">
            </el-input>
          </div>
          <div class="judgeAnswer">
            <el-tag>正确答案</el-tag>

            <el-radio v-model="judgeQuestionForm.answer" label="T">正确</el-radio>
            <el-radio v-model="judgeQuestionForm.answer" label="F">错误</el-radio>
          </div>
          <div class="title">
            <el-tag>解析</el-tag><span>请在输入框中输入题目解析：</span>
            <el-input
              type="textarea"
              rows="4"
              v-model="judgeQuestionForm.analysis"
              placeholder="请输入答案解析"
              resize="none"
              class="answer">
            </el-input>
          </div>
          <div class="submit">
            <el-button type="primary" @click="addJudgeQuestion()">立即添加</el-button>
          </div>
        </div>
      </section>
    </el-tab-pane>



    <el-tab-pane name="second">
      <span slot="label"><i class="iconfont icon-daoru-tianchong"></i>在线组卷</span>
      <div class="box">
        <ul>
          <li>
            <span>试题难度:</span>
            <el-select v-model="difficultyValue" placeholder="试题难度" class="w150">
              <el-option
                v-for="item in difficulty"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </li>
          <li>
            <span>单选题数量：</span> <el-input type="text" v-model="changeNumber"></el-input>
          </li>
          <li>
            <span>填空题数量：</span> <el-input type="text" v-model="fillNumber"></el-input>
          </li>
          <li>
            <span>判断题数量：</span> <el-input type="text" v-model="judgeNumber"></el-input>
          </li>
          <li>
            <el-button type="primary" @click="create()">立即组卷</el-button>
          </li>
        </ul>
      </div>
    </el-tab-pane>
  </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      changeNumber: null, //单选题出题数量
      fillNumber: null, //填空题出题数量
      judgeNumber: null, //判断题出题数量
      activeName: 'first',  //活动选项卡
      options: [ //题库类型
        {
          value: '单选题',
          label: '单选题'
        },
        {
          value: '填空题',
          label: '填空题'
        },
        {
          value: '判断题',
          label: '判断题'
        },
        {
          value: '多选题',
          label: '多选题'
        },
      ],
      difficulty: [ //试题难度
        {
          value: '简单',
          label: '简单'
        },
        {
          value: '一般',
          label: '一般'
        },
        {
          value: '困难',
          label: '困难'
        }
      ],
      difficultyValue: '简单',
      levels: [ //难度等级
        {
          value: '1',
          label: '1'
        },
        {
          value: '2',
          label: '2'
        },
        {
          value: '3',
          label: '3'
        },
        {
          value: '4',
          label: '4'
        },
        {
          value: '5',
          label: '5'
        },
      ],
      rights: [ //正确答案
        {
          value: 'A',
          label: 'A'
        },
        {
          value: 'B',
          label: 'B'
        },
        {
          value: 'C',
          label: 'C'
        },
        {
          value: 'D',
          label: 'D'
        },
      ],
      paperId: null,
      optionValue: '单选题', //题型选中值
      subject: '', //试卷名称用来接收路由参数


      // 单选题表单
      singleQuestionForm: {
        subject: '', //试卷名称
        level: '', //难度等级选中值
        rightAnswer: '', //正确答案选中值
        section: '', //对应章节
        question: '', //题目
        analysis: '', //解析
        answerA: '',
        answerB: '',
        answerC: '',
        answerD: '',
      },

      // 多选题表单
      multiQuestionForm: {
        subject: '', //试卷名称
        level: '', //难度等级选中值
        rightAnswer: '', //正确答案选中值
        section: '', //对应章节
        question: '', //题目
        analysis: '', //解析
        answerA: '',
        answerB: '',
        answerC: '',
        answerD: '',
      },

      // 填空题表单
      fillQuestionForm: {
        subject: '', //试卷名称
        level: '', //难度等级选中值
        answer: '', //正确答案
        section: '', //对应章节
        question: '', //题目
        analysis: '', //解析
      },

      // 判断题表单
      judgeQuestionForm: {
        subject: '', //试卷名称
        level: '', //难度等级选中值
        answer: '', //正确答案
        section: '', //对应章节
        question: '', //题目
        analysis: '', //解析
      },


      postPaper: { //考试管理表对应字段
        paperId: null,
        questionType: null, // 题目类型  1--单选题  2--填空题   3--判断题   4--多选题
        questionId: null,
      }
    };
  },
  created() {
    this.getParams()
  },
  methods: {
    // handleClick(tab, event) {
    //   console.log(tab, event);
    // },
    // create() {
    //   this.$axios({
    //     url: '/api/item',
    //     method: 'post',
    //     data: {
    //       changeNumber: this.changeNumber,
    //       fillNumber: this.fillNumber,
    //       judgeNumber: this.judgeNumber,
    //       paperId: this.paperId,
    //       subject: '计算机网络' //题目数量太少，指定为计算机网络出题
    //     }
    //   }).then(res => {
    //     console.log(res)
    //     let data = res.data
    //     if(data.code==200){
    //       setTimeout(() => {
    //         this.$router.push({path: '/selectQuestion'})
    //       },1000)
    //        this.$message({
    //         message: data.message,
    //         type: 'success'
    //       })
    //     }else if(data.code==400){
    //         this.$message({
    //         message: data.message,
    //         type: 'error'
    //       })
    //     }
    //
    //   })
    // },
    getParams() {
      let subject = this.$route.query.subject //获取试卷名称
      let paperId = this.$route.query.paperId //获取paperId
      this.paperId = paperId
      this.subject = subject
      this.postPaper.paperId = paperId
    },


    // 添加单选题
    addSingleQuestion() {
      this.singleQuestionForm.subject = this.subject

      // 发请求，新建题目表
      this.$axios({
        url: '/api/singleQuestion',
        method: 'post',
        data: {
          ...this.singleQuestionForm
        }
      }).then(res => {
        let status = res.data.code
        if(status == 200) {
          this.$message({
            message: '已添加单选题',
            type: 'success'
          })
          this.singleQuestionForm = {}
        }
      }).then(() => {

        // 获取questionId，添加到试卷-题目表
        this.$axios(`/api/singleQuestionId`).then(res => {
          let questionId = res.data.data.questionId
          this.postPaper.questionId = questionId
          this.postPaper.questionType = 1
          this.$axios({
            url: '/api/paperManage',
            method: 'Post',
            data: {
              ...this.postPaper
            }
          })
        })
      })
    },

    // 添加多选题
    addMultiQuestion() {
      this.multiQuestionForm.subject = this.subject

      this.$axios({
        url: '/api/multiQuestion',
        method: 'post',
        data: {
          ...this.multiQuestionForm
        }
      }).then(res => {
        let status = res.data.code
        if(status == 200) {
          this.$message({
            message: '已添加多选题',
            type: 'success'
          })
          this.multiQuestionForm = {}
        }
      }).then(() => {
        this.$axios(`/api/multiQuestionId`).then(res => {
          let questionId = res.data.data.questionId
          this.postPaper.questionId = questionId
          this.postPaper.questionType = 4
          this.$axios({
            url: '/api/paperManage',
            method: 'Post',
            data: {
              ...this.postPaper
            }
          })
        })
      })
    },

    // 添加填空题
    addFillQuestion() {
      this.fillQuestionForm.subject = this.subject
      this.$axios({
        url: '/api/fillQuestion',
        method: 'post',
        data: {
          ...this.fillQuestionForm
        }
      }).then(res => {
        let status = res.data.code
        if(status == 200) {
          this.$message({
            message: '已添加填空题',
            type: 'success'
          })
          this.fillQuestionForm = {}
        }
      }).then(() => {
        this.$axios(`/api/fillQuestionId`).then(res => {
          let questionId = res.data.data.questionId
          this.postPaper.questionId = questionId
          this.postPaper.questionType = 2
          this.$axios({
            url: '/api/paperManage',
            method: 'Post',
            data: {
              ...this.postPaper
            }
          })
        })
      })
    },

    // 添加判断题
    addJudgeQuestion() {
      this.judgeQuestionForm.subject = this.subject
      this.$axios({
        url: '/api/judgeQuestion',
        method: 'post',
        data: {
          ...this.judgeQuestionForm
        }
      }).then(res => {
        let status = res.data.code
        if(status == 200) {
          this.$message({
            message: '已添加到题库',
            type: 'success'
          })
          this.judgeQuestionForm = {}
        }
      }).then(() => {
        this.$axios(`/api/judgeQuestionId`).then(res => { //获取当前题目的questionId
          let questionId = res.data.data.questionId
          this.postPaper.questionId = questionId
          this.postPaper.questionType = 3
          this.$axios({
            url: '/api/paperManage',
            method: 'Post',
            data: {
              ...this.postPaper
            }
          })
        })
      })
    }
  },
};
</script>

<style lang="less" scoped>
.add {
  margin: 0px 40px;
  .box {
    padding: 0px 20px;
    ul li {
      margin: 10px 0px;
      display: flex;
      align-items: center;
      .el-input {
        width: 6%;
      }
      .w150 {
        margin-left: 20px;
        width: 7%;
      }
    }
  }
  .el-icon-circle-plus {
    margin-right: 10px;
  }
  .icon-daoru-tianchong {
    margin-right: 10px;
  }
  .append {
    margin: 0px 20px;
    ul {
      display: flex;
      align-items: center;
      li {
        margin-right: 20px;
      }
    }
    .change {
      margin-top: 20px;
      padding: 20px 16px;
      background-color: #E7F6F6;
      border-radius: 4px;
      .title {
        padding-left: 6px;
        color: #2f4f4f;
        span:nth-child(1) {
          margin-right: 6px;
        }
        .answer {
          margin: 20px 0px 20px 8px;
        }
        .el-textarea {
          width: 98% !important;
        }
      }
      .options {
        ul {
          display: flex;
          flex-direction: column;
        }
        ul li {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 98%;
          margin: 10px 0px;
          span {
            margin-right: 20px;
          }
        }
      }
      .submit {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .fill {
      .fillAnswer {
        display: flex;
        justify-content: center;
        align-items: center;
        span {
          margin-right: 6px;
        }
        .el-input {
          width: 91% !important;
        }
      }
      .analysis {
        margin-top: 20px;
        margin-left: 5px;
      }
    }
    .judge {
      .judgeAnswer {
        margin-left: 20px;
        margin-bottom: 20px;
      }
    }
    .w150 {
      width: 150px;
    }
    li:nth-child(2) {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .multi {
      margin-top: 20px;
      padding: 20px 16px;
      background-color: #E7F6F6;
      border-radius: 4px;
      .title {
        padding-left: 6px;
        color: #2f4f4f;
        span:nth-child(1) {
          margin-right: 6px;
        }
        .answer {
          margin: 20px 0px 20px 8px;
        }
        .el-textarea {
          width: 98% !important;
        }
      }
      .answer {
        display: flex;
        justify-content: center;
        align-items: center;
        span {
          margin-right: 6px;
          margin-top: 10px;
        }
        .el-input {
          width: 91% !important;
        }
        margin-top: 15px;

      }
      .analysis {
        margin-top: 20px;
        margin-left: 5px;
      }

      .options {
        ul {
          display: flex;
          flex-direction: column;
        }
        ul li {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 98%;
          margin: 10px 0px;
          span {
            margin-right: 20px;
          }
        }
      }
      .submit {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

  }
}
</style>


